<template>
  <!-- <svg
    aria-hidden="true"
    :class="className"
    :style="$props.style"
    class="svg-icon"
  >
    <use :xlink:href="symbolId"></use>
  </svg> -->
  <!-- <component :is="symbolId" :style="$props.style" class="svg-icon"></component> -->
   <!-- <component :is="getIconComponent()" :style="$props.style" class="svg-icon"></component> -->
    <i>icon</i>
</template>

<script lang="ts">
  // import IconMap from './iconMap'
  export default {
    name: 'SvgIcon',
    props: {
      prefix: {
        type: String,
        default: 'mdi'
      },
      name: {
        type: String,
        required: true
      },
      class: {
        type: String,
        default: undefined
      },
      style: {
        type: Object,
        default: undefined
      }
    },
    computed: {
      symbolId() {
        return `icon-${this.prefix}-${this.name}`;
      },
      className() {
        return this.$props.class;
      }
    },
    methods:{
      async getIconComponent(){
      
      }
    },
    mounted() {
      // console.log(IconMap)
    }
  };
</script>
